<template>
    <div class="loginBox">
       <div class="login">
        <div class="title">欢迎回来</div>
       <div class="body">
        <el-form label-width="80px" :model="loginParmas" :rules="rules" ref="form">
          <el-form-item label="用户名" prop="phone">
            <el-input prefix-icon="User" v-model="loginParmas.phone" clearable   placeholder="请输入你的账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input  prefix-icon="Lock" v-model="loginParmas.password" type="password" clearable showPassword  placeholder="请输入你的密码"></el-input>
          </el-form-item >
          <el-form-item>
            <el-button type="primary" class="btn" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
       </div>
       </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref , reactive } from 'vue';
import { useRouter } from 'vue-router';
import useUserStore from '@/stores/modules/userStore';
const userStore = useUserStore()
const loginParmas = reactive({
    phone:'',
    password:''
})

let form = ref(null)
const rules = reactive({
  phone:[
    {required:true,message:'请输入用户名',trigger:'blur'}
  ],
  password:[
    {required:true,message:'请输入密码',trigger:'blur'},
    {required:true,min:6,max:18,message:'密码长度为6-18位',trigger:'blur'}
  ]
})
const router = useRouter()
const login = async ()=>{
  await form.value.validate()
  await userStore.userLogin(loginParmas)
  ElMessage.success('登录成功')
  router.push('/')
}
</script>

<style lang="scss" scoped>

.loginBox{
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/images/bg1.png);
    background-size: cover;
   
    color: black;
    .login {
        padding: 20px;
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 300px;
        //半透明的白色
        background-color: rgba(0, 0, 0, 0.2);
      
        //圆角
        border-radius: 10px;
        //定位
        position: absolute;
        left: 70%;
        top: 50%;
        transform: translate(-50%, -50%);
      .title {
        height: 80px;
        color: white;
        text-align: center;
        line-height: 80px;
        font-size: 30px;
        font-weight: 900;
      }
      .body {
        flex: 1;
        .btn {
            width: 50%;
            margin-left: 60px;
            margin-top: 20px;
        }
      }
    }
}
</style>